{% assign sectionId = product.id %}
{% assign swiperTop = 'sb-product-imagestop-' | append: sectionId  %}
{% assign swiperBottom = 'sb-product-imagesbottom-' | append: sectionId %}
{% assign pagination = 'product-pagination-' | append: sectionId %}

<style>
.sb-product-imagestop {
    width: 600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.sb-product-imagestop img.sb-slide-image {
    width: 600px;
    max-width: 100%;
}
.sb-swiper-pagination {
    display: none;
}
.sb-preview {
    padding-top: 10px;
    position: relative;
}
.sb-product-imagesbottom {
    overflow: hidden;
    padding: 0 40px;
}
.gallery-button-prev, .gallery-button-next {
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    z-index: 1;
    width: 40px;
}
.gallery-button-next {
    right: 0;
}
.gallery-button-prev {
    left: 0;
}
.sb-product-imagesbottom .swiper-slide.swiper-slide-thumb-active{
    border-color: #000;
}
.sb-product-imagesbottom .swiper-slide{
    border: 2px solid transparent;
}
svg.gallery-button-icon {
    fill: #ccc;
}
@media(max-width:768px){
.product-page .product-page__mb {
    width: 100%;
}
.sb-product-imagestop {
    width: 100%;
}
.sb-product-imagestop img.sb-slide-image {
    width: 100%;
    max-width: 100%;
}
}
</style> 
<div class="sb-product-images-content">
    <div id="{{ swiperTop }}" class="sb-product-imagestop">
        <div class="swiper-wrapper">    
            {% for media in product.media %}
                <div class="swiper-slide" data-image-id="{{ product.images[position].id|json }}" data-index="{{media.position}}">
                    <img class="sb-slide-image" src="{{ media.src | img_url: '600x' }}" />
                </div>
            {% endfor %}
        </div>
        <!-- Add Pagination -->
        <div id="{{ pagination }}" class="sb-swiper-pagination"></div>
        <!-- Add Arrows -->
    </div>
    <div class="sb-preview">
        <div id="{{ swiperBottom }}" class="sb-product-imagesbottom">
            <div class="swiper-wrapper">               
                {% for media in product.media %}
                    <div class="swiper-slide">
                        <img class="sb-slide-image" src="{{ media.src | img_url: '150x' }}" />
                    </div>
                {% endfor %}
            </div>
        </div>
        <!-- Add Arrows -->
        <div  class="gallery-button-prev">
            <svg t="1726731960206" class="gallery-button-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20803" width="25" height="25"><path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984c-18.752-18.72-18.752-49.12 0-67.872l351.968-352c18.752-18.752 49.12-18.752 67.872 0 18.752 18.72 18.752 49.12 0 67.872l-318.016 318.048 318.016 318.016c18.752 18.752 18.752 49.12 0 67.872C696.544 907.328 684.256 912 671.968 912z" p-id="20804"></path></svg>
        </div>
        <div class="gallery-button-next">
            <svg t="1726731978072" class="gallery-button-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20965" width="25" height="25"><path d="M314.412638 949.076137c-10.095261 0-20.190521-3.892149-27.853189-11.676446-15.203706-15.446965-14.960447-40.137784 0.486519-55.341489l366.470127-368.416201L286.31619 144.131132C271.234113 128.562537 271.599002 103.871719 287.045967 88.789642c15.446965-14.960447 40.259413-14.717187 55.341489 0.729778l394.201687 397.485687c14.960447 15.446965 14.717187 40.016154-0.608148 55.21986L341.779309 937.76458C334.116641 945.305618 324.26464 949.076137 314.412638 949.076137L314.412638 949.076137zM314.412638 949.076137" p-id="20966"></path></svg>
        </div>
      
    </div>
</div>


<script>
var productBottom = new Swiper("#{{ swiperBottom }}", {
    spaceBetween: 10,
    slidesPerView: 5,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    navigation: {
      prevEl: ".gallery-button-prev",
      nextEl: ".gallery-button-next"
    }                      
});
var productTop = new Swiper("#{{ swiperTop }}", {
    speed:500,
    slidesPerView: 1,
    loopedSlides: 1, 
    zoom: {
      maxRatio: 2,
    },
    pagination: {
      el: "#{{ pagination }}",
      type: 'fraction'
    },
    thumbs: {
      swiper: productBottom
    }
});
</script>


